<template>
    <div>
        <el-table :data="tbpg.tableData" border >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="字段名"></el-table-column>
            <el-table-column prop="source" label="源"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="status" label="当前状态"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">                    
                    <el-button type="text" size="small" @click="btn_change_status(scope.row)">切换状态</el-button>
                    <!-- <el-button type="text" size="small" @click="btn_change_status(scope.row, 0)">禁用</el-button> -->
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import common from '@/utils/common.js'
import {getFieldList, changeStatus} from '@/api/fieldManage.js'
export default {
    data(){
        return {
            searchForm: {
                nickName: ''
            },
            tbpg: {
                tableData: [],
            },
        }
    },
    methods: {
		getList(){
			let that = this;
			getFieldList().then(res => {
				that.set_tbpg(res);
			})
		},
		set_tbpg: function(res){
			// 调整status为中文显示，然后再显示
			let that = this;
			for (var i = 0; i < res.data.data.length; i ++){
				if(res.data.data[i]["status"]==0){
					res.data.data[i]["status"] = "已禁用";
				}else{
					res.data.data[i]["status"] = "已启用";
				}
			};
			that.tbpg.tableData = res.data.data;
		},
		btn_change_status(row){
			// 点击了启用或禁用，修改状态
			let that = this;
			if (row){
				var dataParam = {
					"name": row["name"],
					"status": row["status"],
					"source": row["source"]
				}
				changeStatus(dataParam).then(res=>{
					that.getList();
				})
			}
		}
		
    },
    created () {
		this.getList()
    }  
}
</script>

<style lang="scss" scoped>

</style>

